ajax empty,jQuery empty仅在AJAX调用后的第二次单击时起作用

我有两个div .curation-contents-list和.film-contents-list，每个div都有一个链接列表，当点击一个链接时，会发出一个AJAX调用，它将一些JSON数据附加到一个单独的div .article-container和.project-container。同时，数据附加div，其中隐藏了刚刚单击的链接的链接。

还有另一个可以单击类.panel-close的div，它会删除刚刚附加数据的div，并使包含链接的div再次出现。所以一切都恢复到原始状态

问题是需要再次点击.panel-close div才能触发jQuery中的.empty()和.show()函数。一旦完成这个，jQuery第一次按原样运行。任何有关此事的帮助将不胜感激。

我的HTML基本设置：

的jQuery

$('.load-article').on('click', function(e) {

e.preventDefault();

var target = $('.article-container');

var url =$(this).data('page') + '.json';

$.get(url, function(data) {

$('.curation-contents-list').hide();

$(target).append(data);

$("body").addClass("load-article-is-open"),

$(this).animate({

scrollTop: 0

}, 300, "easeInOutExpo")

});

}),

$('.load-project').on('click', function(e) {

e.preventDefault();

var target = $('.project-container');

var url =$(this).data('page') + '.json';

$.get(url, function(data) {

$('.film-contents-list').hide();

$(target).append(data);

$("body").addClass("load-project-is-open"),

$(this).animate({

scrollTop: 0

}, 300, "easeInOutExpo")

});

}),

$(".panel-close").click(function() {

$("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open"),

$(".curation-panel").animate({

scrollTop: 0

}, 300, "easeInOutExpo"),

$(".film-panel").animate({

scrollTop: 0

}, 300, "easeInOutExpo"),

$('.curation-contents-list').show();

$('.film-contents-list').show();

$('.article-container').empty();

$('.project-container').empty();

});